<nz-card>

  <div class="row">
    <span class="label required">品牌：</span>
    <nz-select [(ngModel)]="formData.brandId" (ngModelChange)="brandChange()" nzShowSearch [disabled]="operationType!==''"
               nzAllowClear nzPlaceHolder="请选择品牌" [nzBackdrop]="true">
      <nz-option *ngFor="let b of brandOptions" [nzValue]="b.id" [nzLabel]="b.name"></nz-option>
    </nz-select>
  </div>
  <div class="row">
    <span class="label required">品类：</span>
    <nz-select [(ngModel)]="formData.category" (ngModelChange)="categoryChange()" nzShowSearch nzAllowClear
               [disabled]="operationType!==''"
               nzPlaceHolder="请选择品类" [nzBackdrop]="true">
      <nz-option [nzValue]="1" nzLabel="手机"></nz-option>
      <nz-option [nzValue]="2" nzLabel="平板"></nz-option>
    </nz-select>
  </div>
  <div class="row">
    <span class="label required">系列：</span>
    <nz-select [(ngModel)]="formData.seriesId" (ngModelChange)="seriesChange()" nzShowSearch nzAllowClear
               [disabled]="operationType!==''"
               [nzPlaceHolder]="seriesOptions.length?'请选择系列':'请先选择品牌'" [nzBackdrop]="true">
      <nz-option *ngFor="let s of seriesOptions" [nzValue]="s.id" [nzLabel]="s.name"></nz-option>
    </nz-select>
  </div>
  <div class="row">
    <span class="label required">机型：</span>
    <nz-select [(ngModel)]="formData.modelId" (ngModelChange)="modelChange()" nzShowSearch nzAllowClear [disabled]="operationType!==''"
               [nzPlaceHolder]="modelOptions.length?'请选择机型':'请先选择系列'" [nzBackdrop]="true">
      <nz-option *ngFor="let m of modelOptions" [nzValue]="m.id" [nzLabel]="m.name"></nz-option>
    </nz-select>
  </div>
  <div class="row">
    <span style="vertical-align: middle;" class="label">备注：</span>
    <span style="display: inline-block;width: 230px;vertical-align: top">
    <nz-textarea-count style="width: 100%;" [nzMaxCharacterCount]="100">
      <textarea rows="4" maxlength="100" [disabled]="operationType==='view'" nz-input [(ngModel)]="formData.note"></textarea>
    </nz-textarea-count>
    </span>
  </div>
  <div *ngIf="!(operationType==='view')" class="row">
    <button nz-button nzType="primary" (click)="generateTable()">生成表格</button>
  </div>


  <div class="row">
    <nz-table #nestedTable [nzData]="formData.content" [nzPageSize]="999" nzBordered nzSize="small"
              nzShowSizeChanger
              nzShowPagination="false"
              [nzFrontPagination]="false">
      <tbody>
      <ng-template ngFor let-data [ngForOf]="nestedTable.data">
        <tr>
          <td colspan="5" nzAlign="center"><b>{{ data.channel }}</b></td>
        </tr>
        <tr>
          <td nzAlign="center">存储容量</td>
          <td nzAlign="center">在保</td>
          <td nzAlign="center">在保（上次）</td>
          <td nzAlign="center">过保</td>
          <td nzAlign="center">过保（上次）</td>
        </tr>
        <tr *ngFor="let m of data['list']">
          <td nzAlign="center">{{ m.romNum }}</td>
          <td nzAlign="center">
            <nz-input-number nzPlaceHolder="请输入" [nzMin]="0" [nzMax]="9999999" [nzPrecision]="0" [disabled]="operationType==='view'"
                             [(ngModel)]="m.zb"></nz-input-number>
          </td>
          <td nzAlign="center">{{ m.zbsc || '-' }}</td>
          <td nzAlign="center">
            <nz-input-number nzPlaceHolder="请输入" [nzMin]="0" [nzMax]="9999999" [nzPrecision]="0" [disabled]="operationType==='view'"
                             [(ngModel)]="m.gb"></nz-input-number>
          </td>
          <td nzAlign="center">{{ m.gbsc || '-' }}</td>
        </tr>
      </ng-template>
      </tbody>
    </nz-table>
  </div>

  <div class="row">
    <button nz-button nzType="default" routerLink="/aisi-recyc/modelBasePrice">取消</button>
    <button nz-button nzType="primary" *ngIf="!(operationType==='view')" (click)="save()">更新价格</button>
  </div>
</nz-card>
